import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:get/get.dart';
import 'package:mall/constant/app_colors.dart';

import 'package:mall/constant/app_strings.dart';
import 'package:mall/gen/r.dart';
import 'package:mall/modules/sc/cart_sc.dart';
import 'package:mall/modules/sc/goods_sc.dart';
import 'package:mall/ui/page/goods/detail/widgets/goods_detail_issue_widget.dart';
import 'package:mall/ui/page/goods/detail/widgets/goods_detail_price_widget.dart';
import 'package:mall/ui/page/goods/detail/widgets/goods_detail_swiper_widget.dart';
import 'package:mall/ui/widgets/divider_line.dart';
import 'package:mall/utils/image_component/image_component.dart';
import 'package:mall/utils/list_placeholder_component/list_placeholder_component.dart';
import 'package:mall/modules/model/goods_detail_entity.dart';

import 'widgets/goods_detail_bottom_bar_widget.dart';
import 'widgets/goods_detail_comment_widget.dart';

class GoodsDetailPage extends StatefulWidget {
  final int _goodsId;

  GoodsDetailPage(this._goodsId);

  @override
  _GoodsDetailPageState createState() => _GoodsDetailPageState();
}

class _GoodsDetailPageState extends State<GoodsDetailPage> {
  var _goodsId;
  // GoodsDetailViewModel _goodsDetailViewModel = GoodsDetailViewModel();
  // CartViewModel _cartViewModel;
  final sc_cart = Get.put(CartSc());
  late final sc_goodsDetail = Get.put(GoodsDetailSc(), tag: widget._goodsId.toString());
  // final sc_user = Get.put(UserSc());

  RxInt specificationId = 0.obs;

  @override
  void initState() {
    super.initState();
    _goodsId = widget._goodsId;
    sc_goodsDetail.goodsId = _goodsId;
    sc_goodsDetail.refreshData().then((value) {
      final model = sc_goodsDetail.data.value;
      if (model != null) {
        specificationId.value = model.specificationList?[0].valueList?[0].id ?? 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Obx(() => Scaffold(
              body: WrappedListPlaceholderComponent.widget1(
                  state: sc_goodsDetail.loadState.value,
                  data: sc_goodsDetail.data.value,
                  builder: (data) {
                    return _dataView(data);
                  }),
              bottomNavigationBar: sc_goodsDetail.data.value == null
                  ? Container()
                  : GoodsDetailBottomBarWidget(model: sc_goodsDetail.data.value!),
            )),
        //导航栏
        SafeArea(
            child: Padding(
          padding: const EdgeInsets.only(right: 15, left: 15, top: 15),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InkWell(
                onTap: () => Get.back(),
                child: ImageComponent(
                  R.image.detailGoBack.path,
                  size: 32,
                ),
              ),
              InkWell(
                onTap: () => Get.back(),
                child: ImageComponent(
                  R.image.detailCar.path,
                  size: 32,
                ),
              ),
            ],
          ),
        )),
      ],
    );
  }

  Widget _dataView(GoodsDetailEntity model) {
    return Container(
      color: AppColors.C_FFFFFF,
      child: SingleChildScrollView(
        child: Column(
          children: [
            //顶部图片 与价格参数
            //商品图片
            GoodsDetailSwiperWidget(model),
            //价格和销量
            GoodsDetailPriceWidget(model: model),

            DividerLineView(height: 10),

            //评价
            GoodsDetailCommentWidget(
              model: model.comment,
            ),
            DividerLineView(height: 10),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 15),
                Row(
                  children: [
                    SizedBox(width: 15),
                    Text(
                      '常见详情',
                      style: TextStyle(fontSize: 15, color: AppColors.C_222222, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),

                //商品详情
                Html(
                  data: model.info?.detail,
                  style: {
                    'flutter': Style(
                      display: Display.block,
                    ),
                    'p': Style(
                      padding: HtmlPaddings.all(0),
                      margin: Margins.all(0),
                    ),
                    'img': Style(
                      padding: HtmlPaddings.all(0),
                      display: Display.block,
                      margin: Margins.all(0),
                    ),
                  },
                ),
              ],
            ),
            //常见问题
            model.issue == null || model.issue!.length == 0
                ? Divider()
                : Container(
                    child: Column(
                      children: <Widget>[
                        SizedBox(height: 5),
                        Row(
                          children: [
                            SizedBox(width: 20),
                            Text(AppStrings.COMMON_PROBLEM,
                                style: TextStyle(fontSize: 15, color: AppColors.C_222222, fontWeight: FontWeight.bold)),
                          ],
                        ),
                        SizedBox(height: 5),
                        GoodsDetailIssueWidget(model: model),
                      ],
                    ),
                  ),
          ],
        ),
      ),
    );
  }
}
